<template>
    <div class="main-lefter-container">
        <lefter-btn v-for="item of btnList.mainBtn"
                    type="mainBtn"
                    :key="item"
                    :id="item.id"
                    :name="item.name"
                    :checked="item.checked"
                    @checkLefterBtn="changeBtn"></lefter-btn>
        <div style="height: 10px"></div>
        <div class="lefter-title">创建的歌单</div>
        <play-list-btn v-for="item of btnList.playListBtnMine"
                       type="playListBtnMine"
                       :key="item"
                       :id="item.id"
                       :checked="item.checked"
                       :count="item.count"
                       :name="item.name"
                       @checkLefterBtn="changeBtn"
                       :img-path="item.imgPath"></play-list-btn>
        <div class="lefter-title">收藏的歌单</div>
        <play-list-btn v-for="item of btnList.playListBtnFav"
                       type="playListBtnFav"
                       :key="item"
                       :id="item.id"
                       :checked="item.checked"
                       :count="item.count"
                       :name="item.name"
                       @checkLefterBtn="changeBtn"
                       :img-path="item.imgPath"></play-list-btn>
        <div style="height: 10px"></div>
    </div>
</template>

<script>
import router from "../../router/index.js";
import lefterBtn from "./mainLefter/lefterBtn.vue";
import playListBtn from "./mainLefter/playListBtn.vue";
import {userApi} from "../../api/userAPi.js";
import {useStore} from "vuex";
import {onMounted, reactive} from "vue";
export default {
    name: "mainLefter",
    components:{
        lefterBtn,
        playListBtn
    },
    setup() {
        let store = useStore()

        let btnList = reactive({

            mainBtn:[
                {id: 'music', checked:true, name:'发现音乐'},
                {id: 'dynamic', checked: false, name: '关注动态'},
                {id: 'recent', checked: false, name: '最近播放'},
                {id: 'dj', checked: false, name: '我的电台'}
            ],
            playListBtnMine:[],
            playListBtnFav:[],
        })

        function changeBtn(value, type) {
            for (let item in btnList) {
                if (item === type) {
                    for (let obj of btnList[item]) {
                        if (value === obj.id) {
                            obj.checked = true
                        } else {
                            obj.checked = false
                        }
                    }
                } else {
                    for (let obj of btnList[item]) {
                        obj.checked = false
                    }
                }
            }
            switch (type) {
                case 'mainBtn':
                    router.push('/main/' + value)
                    break
                case 'playListBtnMine':
                    router.push({
                        path:'/main/playList',
                        query:{
                            id:value
                        }
                    })
                    break
                case 'playListBtnFav':
                    router.push({
                        path:'/main/playList',
                        query:{
                            id:value
                        }
                    })
                    break
            }

        }

        async function getPlayList(uid) {
            await userApi.userPlayList(uid,(res)=>{
                res.data.playlist.forEach(item=>{
                    let node = {
                        id:item.id,
                        imgPath:item.coverImgUrl,
                        name:item.name,
                        checked:false,
                        count:item.trackCount
                    }
                    if (item.userId === Number(store.state.loginStore.uid)) {
                        btnList.playListBtnMine.push(node)
                    } else {
                        btnList.playListBtnFav.push(node)
                    }
                })
            })
        }

        async function getUserDj(uid) {
            await userApi.userDj(uid,(res)=>{
                console.log(res.data)
            })
        }

        onMounted(async () => {
            await getPlayList(store.state.loginStore.uid)
            // getUserDj(store.state.loginStore.uid)
        })


        return {
            btnList,
            changeBtn
        }
    }
}
</script>

<style scoped>
    .main-lefter-container {
        overflow-y: scroll;
        width: 300px;
        height: 100%;
        background-color: rgb(243, 243, 245);
        border-right: 1px #d0d0d0 solid;
    }

    .lefter-title {
        width: auto;
        padding: 10px 10px 10px 20px;
        color: grey;
        font-size: 20px;
    }




</style>